<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head>
<body class="bg-gray-50">
    <!-- 顶部导航 -->
    <div class="bg-white p-3 shadow flex items-center sticky top-0 z-10">
        <button class="mr-4"><i class="fas fa-arrow-left"></i></button>
        <h1 class="text-lg font-semibold flex-grow text-center">景点详情</h1>
        <button class="ml-4 opacity-0"><i class="fas fa-arrow-left"></i></button> <!-- 占位保持标题居中 -->
    </div>

    <!-- 景点图片 -->
    <div class="w-full h-60 bg-gray-300">
         <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8bGFuZHNjYXBlfHx8fHx8MTY4MTIzNDU2OA&ixlib=rb-4.0.3&q=80&w=1080" alt="Attraction Placeholder" class="w-full h-full object-cover">
    </div>

    <!-- 景点信息 -->
    <div class="p-4">
        <h2 class="text-2xl font-bold mb-2">知名景点A</h2>
        <div class="flex items-center text-sm text-gray-500 mb-4">
            <i class="fas fa-map-marker-alt mr-1"></i> 景区中部区域
            <span class="mx-2">|</span>
            <i class="fas fa-star text-yellow-400 mr-1"></i> 4.8 (230+ 评价)
        </div>

        <!-- 语音讲解 -->
        <div class="bg-white p-3 rounded-lg shadow mb-4 flex items-center space-x-3">
            <button class="text-blue-500"><i class="fas fa-play-circle fa-2x"></i></button>
            <div class="flex-grow">
                <div class="text-sm font-medium">景点语音讲解</div>
                <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                    <div class="bg-blue-500 h-1.5 rounded-full" style="width: 30%"></div> <!-- 模拟播放进度 -->
                </div>
            </div>
            <span class="text-xs text-gray-500">01:25 / 04:30</span>
        </div>

        <!-- 文字介绍 -->
        <h3 class="text-lg font-semibold mb-2">景点介绍</h3>
        <p class="text-gray-700 leading-relaxed">
            这里是关于这个景点的详细介绍文字。它有着悠久的历史和丰富的文化内涵，吸引了无数游客前来参观。
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>

         <!-- 相关推荐/附近 -->
         <h3 class="text-lg font-semibold mt-6 mb-2">附近设施</h3>
         <div class="flex space-x-4 overflow-x-auto pb-2">
             <div class="flex-shrink-0 w-24 text-center">
                 <div class="p-3 bg-blue-100 rounded-full inline-block mb-1">
                    <i class="fas fa-restroom text-blue-600"></i>
                 </div>
                 <p class="text-xs">洗手间</p>
             </div>
              <div class="flex-shrink-0 w-24 text-center">
                 <div class="p-3 bg-green-100 rounded-full inline-block mb-1">
                    <i class="fas fa-store text-green-600"></i>
                 </div>
                 <p class="text-xs">纪念品店</p>
             </div>
              <div class="flex-shrink-0 w-24 text-center">
                 <div class="p-3 bg-yellow-100 rounded-full inline-block mb-1">
                    <i class="fas fa-utensils text-yellow-600"></i>
                 </div>
                 <p class="text-xs">餐厅</p>
             </div>
         </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="sticky bottom-0 bg-white p-3 shadow-inner flex justify-around border-t">
        <button class="flex flex-col items-center text-gray-600">
            <i class="far fa-heart fa-lg"></i>
            <span class="text-xs mt-1">收藏</span>
        </button>
         <button class="flex flex-col items-center text-gray-600">
            <i class="fas fa-share-alt fa-lg"></i>
            <span class="text-xs mt-1">分享</span>
        </button>
        <button class="bg-blue-500 text-white px-8 py-2 rounded-full font-semibold">
            <i class="fas fa-route mr-1"></i> 到这里去
        </button>
    </div>

</body>
</html>